<template>
  <div class="previous-processing-info">
    <!-- 处理信息历史 -->
    <div class="info-section">
      <h4 class="section-title">
        <i class="el-icon-user"></i>
        处理信息记录
      </h4>
      <div class="info-grid">
        <!-- 处理人员 -->
        <div class="info-item">
          <div class="item-label">
            处理人员
            <el-tooltip content="上一次负责处理此故障的维修人员" placement="top">
              <i class="el-icon-question help-icon"></i>
            </el-tooltip>
          </div>
          <div class="item-value">{{ getUserName(processingData.handler) }}</div>
        </div>

        <!-- 处理时间 -->
        <div class="info-item">
          <div class="item-label">
            处理时间
            <el-tooltip content="上一次处理的具体时间" placement="top">
              <i class="el-icon-question help-icon"></i>
            </el-tooltip>
          </div>
          <div class="item-value">{{ formatTime(processingData.processedTime) || '未记录' }}</div>
        </div>

        <!-- 预计完成时间 -->
        <div class="info-item">
          <div class="item-label">
            预计完成时间
            <el-tooltip content="上一次设定的预计完成时间" placement="top">
              <i class="el-icon-question help-icon"></i>
            </el-tooltip>
          </div>
          <div class="item-value">{{ formatTime(processingData.estimatedTime) || '未设定' }}</div>
        </div>

        <!-- 处理状态 -->
        <div class="info-item">
          <div class="item-label">
            处理状态
            <el-tooltip content="上一次处理的结果状态" placement="top">
              <i class="el-icon-question help-icon"></i>
            </el-tooltip>
          </div>
          <div class="item-value">
            <el-tag size="small" type="warning">未完成</el-tag>
          </div>
        </div>
      </div>

      <!-- 处理方案 -->
      <div class="info-item full-width">
        <div class="item-label">
          处理方案
          <el-tooltip content="上一次制定的详细处理方案" placement="top">
            <i class="el-icon-question help-icon"></i>
          </el-tooltip>
        </div>
        <div class="item-value text-content">
          <MarkdownRenderer
            :value="processingData.solution || ''"
            :editable="false"
            :maxHeight="100"
          />
          <div v-if="!processingData.solution" class="empty-text">未记录处理方案</div>
        </div>
      </div>

      <!-- 现场记录 -->
      <div class="info-item full-width">
        <div class="item-label">
          现场记录
          <el-tooltip content="上一次的现场观察和处理记录" placement="top">
            <i class="el-icon-question help-icon"></i>
          </el-tooltip>
        </div>
        <div class="item-value text-content">
          <MarkdownRenderer
            :value="processingData.onSiteObservation || ''"
            :editable="false"
            :maxHeight="100"
          />
          <div v-if="!processingData.onSiteObservation" class="empty-text">未记录现场情况</div>
        </div>
      </div>

      <!-- 处理备注 -->
      <div class="info-item full-width" v-if="processingData.processingNotes">
        <div class="item-label">
          处理备注
          <el-tooltip content="上一次处理的补充说明和备注" placement="top">
            <i class="el-icon-question help-icon"></i>
          </el-tooltip>
        </div>
        <div class="item-value text-content">
          {{ processingData.processingNotes }}
        </div>
      </div>
    </div>

    <!-- 现场确认历史 -->
    <div class="info-section">
      <h4 class="section-title">
        <i class="el-icon-view"></i>
        现场确认记录
      </h4>
      <div class="info-grid">
        <!-- 更换零件 -->
        <div class="info-item">
          <div class="item-label">
            更换零件
            <el-tooltip content="上一次确认的更换零件信息" placement="top">
              <i class="el-icon-question help-icon"></i>
            </el-tooltip>
          </div>
          <div class="item-value">{{ manualData.productionPart || '未确认' }}</div>
        </div>

        <!-- 验收结果 -->
        <div class="info-item">
          <div class="item-label">
            验收结果
            <el-tooltip content="上一次的验收结果" placement="top">
              <i class="el-icon-question help-icon"></i>
            </el-tooltip>
          </div>
          <div class="item-value">
            <el-tag 
              size="small" 
              :type="getAcceptanceTagType(manualData.acceptanceResult)">
              {{ getAcceptanceLabel(manualData.acceptanceResult) }}
            </el-tag>
          </div>
        </div>

        <!-- 验收时间 -->
        <div class="info-item">
          <div class="item-label">
            验收时间
            <el-tooltip content="上一次验收的时间" placement="top">
              <i class="el-icon-question help-icon"></i>
            </el-tooltip>
          </div>
          <div class="item-value">{{ formatTime(manualData.completedTime) || '未记录' }}</div>
        </div>

        <!-- 验收人员 -->
        <div class="info-item">
          <div class="item-label">
            验收人员
            <el-tooltip content="上一次负责验收的人员" placement="top">
              <i class="el-icon-question help-icon"></i>
            </el-tooltip>
          </div>
          <div class="item-value">{{ getUserName(manualData.inspector) }}</div>
        </div>
      </div>

      <!-- 现场观察记录 -->
      <div class="info-item full-width">
        <div class="item-label">
          现场观察记录
          <el-tooltip content="上一次的现场观察详细记录" placement="top">
            <i class="el-icon-question help-icon"></i>
          </el-tooltip>
        </div>
        <div class="item-value text-content">
          <MarkdownRenderer
            :value="manualData.onSiteObservation || ''"
            :editable="false"
            :maxHeight="100"
          />
          <div v-if="!manualData.onSiteObservation" class="empty-text">未记录现场观察</div>
        </div>
      </div>
    </div>

    <!-- 继续处理原因 -->
    <div class="continue-reason">
      <div class="reason-header">
        <i class="el-icon-warning-outline"></i>
        <span>需要继续处理的原因</span>
      </div>
      <div class="reason-content">
        基于上次处理结果为不通过，需要进行进一步的处理和确认。
      </div>
    </div>
  </div>
</template>

<script>
export default {
  name: 'PreviousProcessingInfo',
  dicts: ['gelly_abnormal_type', 'gelly_fault_level', 'gelly_acceptance_result'],
  props: {
    processingData: {
      type: Object,
      default: () => ({})
    },
    manualData: {
      type: Object,
      default: () => ({})
    },
    userList: {
      type: Array,
      default: () => []
    }
  },
  methods: {
    formatTime(time) {
      if (!time) return '';
      return new Date(time).toLocaleString('zh-CN', {
        year: 'numeric',
        month: '2-digit',
        day: '2-digit',
        hour: '2-digit',
        minute: '2-digit'
      });
    },
    getAcceptanceTagType(result) {
      const typeMap = {
        '通过': 'success',
        '不通过': 'danger',
        '待复检': 'warning'
      };
      return typeMap[result] || 'info';
    },
    getAcceptanceLabel(val) {
      const map = { 0: '待复检', 1: '通过', 2: '不通过', '0': '待复检', '1': '通过', '2': '不通过' };
      return map[val] || '未验收';
    },
    getUserName(userId) {
      if (!userId || !this.userList) return '未记录';
      if (this.userList.length === 0) return '未记录';
      const user = this.userList.find(u => u.value === userId || u.value === String(userId));
      return user ? user.label : `用户${userId}`;
    }
  }
}
</script>

<style scoped>
.previous-processing-info {
  display: flex;
  flex-direction: column;
  gap: 24px;
}

.info-section {
  background: #f8fafc;
  border-radius: 12px;
  padding: 20px;
  border: 1px solid #e2e8f0;
}

.section-title {
  display: flex;
  align-items: center;
  gap: 8px;
  font-size: 14px;
  font-weight: 600;
  color: #374151;
  margin: 0 0 16px 0;
  padding-bottom: 8px;
  border-bottom: 1px solid #e2e8f0;
}

.section-title i {
  color: #6b7280;
}

.info-grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(200px, 1fr));
  gap: 16px;
  margin-bottom: 16px;
}

.info-item {
  display: flex;
  flex-direction: column;
  gap: 6px;
}

.info-item.full-width {
  grid-column: 1 / -1;
}

.item-label {
  font-size: 12px;
  font-weight: 600;
  color: #6b7280;
  text-transform: uppercase;
  letter-spacing: 0.05em;
  display: flex;
  align-items: center;
  gap: 6px;
}

.help-icon {
  font-size: 14px;
  color: #9ca3af;
  cursor: help;
  transition: color 0.2s ease;
}

.help-icon:hover {
  color: #6b7280;
}

.item-value {
  font-size: 14px;
  color: #1f2937;
  font-weight: 500;
  min-height: 20px;
}

.text-content {
  background: white;
  padding: 12px;
  border-radius: 8px;
  border: 1px solid #e5e7eb;
  line-height: 1.5;
  min-height: 60px;
}

.continue-reason {
  background: #fef3cd;
  border: 1px solid #fbbf24;
  border-radius: 12px;
  padding: 16px;
}

.reason-header {
  display: flex;
  align-items: center;
  gap: 8px;
  font-size: 14px;
  font-weight: 600;
  color: #92400e;
  margin-bottom: 8px;
}

.reason-content {
  font-size: 13px;
  color: #78350f;
  line-height: 1.5;
}

.empty-text {
  color: #94a3b8;
  font-style: italic;
  font-size: 14px;
}

/* 响应式设计 */
@media (max-width: 768px) {
  .info-grid {
    grid-template-columns: 1fr;
  }
  
  .info-section {
    padding: 16px;
  }
}
</style>
